<template>
  <p>计数器：{{ count }}</p>
  <p>{{  num  }}</p>
</template>

<script setup>
import { ref, watchEffect } from 'vue'
const count = ref(0)
const num = ref(0)
const obj = ref({name: 'zs' })
// 监听响应式数据变化
// 监听单个数据
// watch(count, (newValue, oldValue) => {
//   console.log('count', newValue, oldValue)
// })
// watch(num, (newValue, oldValue) => {
//   console.log('num', newValue, oldValue)
// })

// 监听多个数据
// watch([count, num], (newValue, oldValue) => {
//   console.log('count, num', newValue, oldValue)
// })

// deep 深度监听
// watch(obj, (newValue, oldValue) => {
//   console.log('obj', newValue, oldValue);
// }, {deep: true, immediate: true})

setTimeout(() => {
  count.value = 20
  // num.value = 30
  // obj.value.name = 'ls'
  // obj.value = {name: 'ls'}
}, 1000)

// 只要监听到数据变化，就会执行回调
watchEffect(() => {
  console.log(count.value);
  console.log(num.value);
  console.log(obj.value);
})
</script>

<style scoped>

</style>